<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <!--  百度cdn引入jquery  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        input {
            width: 200px;
            height: 25px;
        }

        .btn {
            width: 450px;
            height: 30px;
            background-color: #D2E9FF;
            border-radius: 10px;
            border: none;
        }

        #code {
            width: 90px;
        }

        img {
            line-height: 50px;
        }

        table {
            background-color: #F7FCFF;
        }
    </style>
</head>
<body>
<div>
    <form id="loginForm">
        <table border="1px" width="550px" cellspacing="0px" cellpadding="10px" align="center">
            <tr width="50px" align="center">
                <td>用户名</td>
                <td align="left"><input type="text" placeholder="请输入用户名" name="uname" id="username">
                    <span id="sp"></span></td>
            </tr>
            <tr width="50px" align="center">
                <td>密码</td>
                <td align="left"><input type="password" placeholder="请输入密码" name="upassword"></td>
            </tr>
            <tr width="50px" align="center">
                <td>手机号</td>
                <td align="left"><input type="password" placeholder="请输入手机号" name="uphone"></td>
            </tr>
            <tr width="50px" align="center">

                <td><img src="/captcha" style="width:100px;height:28px;" id="cap"/>
                <td align="left"><input type="test" placeholder="请输入验证码" id="code" name="ucode">
                    <span id="sp1"></span></td>
                </td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="submit" value="登录" class="btn"></td>
            </tr>
        </table>
    </form>
</div>
</body>
<script>
    $(function () {
        //点击验证码自动更新
        $("#cap").click(function () {
            $("#cap").attr("src", "/captcha?t=" + new Date().getTime())
        });
        //用户名
        $("#username").blur(function () {
            // jquery 发送ajax请求
            $.ajax({
                url: '/login/lookuser',
                type: 'post',
                data: $("#loginForm").serialize(),
                success: function (ret) {
                    if (ret == "用户名申请通过！") {

                        $("#sp").text(ret).css("color", "green");
                    } else {
                        $("#sp").text(ret).css({"color":"red","font-size":"10px"});
                    }
                }
            });
        });
        //判断验证码是否正确
        $("#code").blur(function () {
            // 获取表单内容
            var formData = new FormData($("form")[0]);
            // jquery 发送ajax请求
            $.ajax({
                url: '/login/lookcode',
                type: 'post',
                data: formData,
                // 使用ajax请求去上传文件需要把如下两个属性设置为false，固定写法
                processData:false,
                contentType:false,
                success: function (ret) {

                    $("#sp1").text(ret).css("color", "red");

                }
            });
        });
    });
</script>
</html>